extends common/layout
block content
    link(rel='stylesheet' type='text/css' href='../css/image-space.min.css')
    link(rel='stylesheet' type='text/css' href='../css/zTreeStyle.css')
    include common/head
    div.image-space-container
        include common/nav
        div.seller-content
            div.main-wrap
                p.title
                    span.gray-font 店铺管理>
                    span 图片空间
                div.image-container.clearfix
                    div.menu-l
                        div.card-list.border-r
                            div.list-wrap
                                p 图片目录
                                ul.ztree(id="tree")
                    div.image-r
                        div.card-list
                            div.opt-wrap
                                label
                                    input.check-all(type="checkbox")
                                    | 全选
                                label
                                    i.icon.icon-delete2
                                    | 删除
                                div.btn-container
                                    div.btn.btn-img 上传图片
                                        input(type="file")
                                    div.btn(data-toggle="modal" data-target="#createModal") 新建文件夹
                            div.row-wrap
                                div.item-group.clearfix
                                    div.item-wrap
                                        div.opt-item.hidden
                                            div.file-wrap
                                                div.file-bg
                                                    i.icon.icon-wenjianjia2
                                            div.img-wrap.hidden
                                                img(src="../image/main2.png")
                                            p.file-name 宝贝图片
                                            input(type="checkbox")
                                    div.null-list-wrap
                                        img(src="../image/icon_pic.png")
                                        p 将文件拖放到此窗口即可上传
                                        p 仅支持3M以内jpg、jpeg、gif、png格式上传
    div.modal.fade(id="createModal")
        div.modal-dialog
            div.modal-content
                div.modal-header
                    span 新建文件夹
                    button.btn.close(type="button" data-dismiss="modal") &times;
                div.modal-body
                    span 文件夹名称：
                    input.file-name(type="text")
                div.modal-footer
                    button.btn.btn-border-orange(data-dismiss="modal") 取消
                    button.btn.btn-orange.btn-file(data-dismiss="modal") 确定


    script(src="../js/jquery.ztree.core.min.js")
    script(src="../js/page.js")
    script(src="../js/dropzone.min.js")
    script.
        if(!$(".null-list-wrap").hasClass("hidden")) {
            var template = '<div class="item-wrap"><div class="opt-item"><div class="file-wrap hidden"><div class="file-bg"><i class="icon icon-wenjianjia2"></i></div></div><div class="img-wrap"><img data-dz-thumbnail></div><p class="file-name" data-dz-name></p><input type="checkbox"></div></div>';
            $(".item-group").dropzone({
                url: "/file/post",
                maxFiles: 10,
                maxFilesize: 5,
                paramName: "image",
                acceptedFiles: "image/*",
                previewTemplate: template,
                init: function () {
                    this.on("addedfile", function (file, res) {
                        $(".null-list-wrap").remove();
                    })
                }
            });
        }
        var treeObj;
        var setting = {
            view: {
                showIcon: false
            },
            callback: {
                onClick: zTreeOnClick
            }
        };
        var zNodes = [
            {
                id: 10,
                name: "我的图片",
                open: true,
                children: [
                    {
                        id: 111,
                        name: "宝贝图片",
                        children: [
                            {
                                id: 123,
                                name: "测试"
                            }
                        ]
                    },
                    {
                        id: 112,
                        name: "店铺装修",
                        children: [
                            {
                                id: 124,
                                name: "轮播图"
                            },
                            {
                                id: 125,
                                name: "商品图"
                            },
                            {
                                id: 126,
                                name: "商品图"
                            }
                        ]
                    }
                ]
            }
        ];
        treeObj = $.fn.zTree.init($(".ztree"), setting, zNodes);
        treeObj.selectNode(treeObj.getNodeByParam("id", 10));

        function zTreeOnClick(event, treeId, treeNode) {
            alert(treeNode.id + ", " + treeNode.name);
        };
        
        function addNode(name, isParent) {
            var nodes = treeObj.getSelectedNodes(),
                treeNode = nodes[0];
            if (treeNode) {
                treeObj.addNodes(treeNode, {
                    isParent: isParent,
                    name: name
                });
            }
        }

        $(".btn-img input").change(function (e) {
            var fileName = e.target.files[0].name;
            addNode(fileName, false);
        })

        $(".btn-file").click(function () {
            var name = $("#createModal .file-name").val();
            addNode(name, true);
        });

        $(".check-all").change(function () {
            if($(this).get(0).checked) {
                $(".item-wrap input[type='checkbox']").each(function () {
                    $(this).get(0).checked = true;
                })
            }else {
                $(".item-wrap input[type='checkbox']").each(function () {
                    $(this).get(0).checked = false;
                })
            }
        })

        //页面滚动执行事件
        $(".row-wrap").scroll(function () {
            loadMore($(this), function () {
                var result = "";
                for (var i = 0; i < 12; i++) {
                    result += '<div class="item-wrap"><div class="opt-item"><div class="file-wrap"> <div class="file-bg"><i class="icon icon-wenjianjia2"></i></div> </div> <div class="img-wrap hidden"><img src="../image/main2.png"></div><p class="file-name">宝贝图片</p><input type="checkbox"></div> </div>'
                }
                setTimeout(function () {
                    //$(".load-more").remove();
                    $('.item-group').append(result);
                    page += 1;
                    finished = 0;
                    console.log(page);
                    //最后一页
                    if (page == 10) {
                        sover = 1;
                        loadOver();
                    }
                }, 1000);
            });
        });